<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery-2.1.4.min.js"></script>
    <style>
        .s-ipt {
            display: inline-block;
            position: relative;
            height: 32px;
            width: 450px;
            font: 16px/18px arial;
            line-height: 22px;
            margin: 6px 0 0 7px;
            padding: 0;
            background: transparent;
            border: 0;
            outline: 0;
            -webkit-appearance: none;
            box-sizing: border-box;
            border: 1px solid #f1f1f1;
        }
        .s-ipt:focus{
            border:1px solid #2d78f4;
        }

        .s-btn {
            background: #3385ff;
            padding: 6px 16px;
            color: white;
            border-bottom: 1px solid #2d78f4;
            font-size: 16px;
            border-radius: 2px;
            text-align: center;
            word-spacing: normal;
            text-transform: none;
            text-indent: 0px;
            text-shadow: none;
            width: auto;height: auto;border-bottom: 1px solid transparent;
            cursor: pointer;
            position: relative;
            top: -2px;
            left: -5px;
        }
        .s-type{
            height: 40px;
            font-size: 14px;
            margin: 10px 50px 10px 0;
            background: -webkit-linear-gradient(top, rgba(100,100,100,0.15),rgba(100,100,100,0.1));
        }
        .s-type>ul{
            display: -webkit-box;
        }
        .s-type>ul>li{
            height: 100%;
            width:100px;
            color: #666;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
        }
        .s-type>ul>li.active{
            font-weight: 700;
            border-bottom: 2px solid #2d78f4;
        }
    </style>
</head>
<body class="lay-blog">
<div th:include="/teacher/templates::header"></div>
<div class="container-wrap" style="background-color: white;">
    <div class="container" id="search" style="width:1000px;">
        <div class="search-form" style="padding: 20px;">
            <div class="s-input">
                <input type="text" class="s-ipt" v-model="text">
                <span class="s-btn" style="">
                    搜 索
                </span>
            </div>
            <div class="s-type">
                <ul>
                    <li class="active">文章</li>
                    <li>视频</li>
                    <li>用户</li>
                </ul>
            </div>
        </div>
        <div class="search-result">
            <div class="item" v-for="article in articles">
                <div class="item-box  layer-photos-demo1 layer-photos-demo">
                    <h3><a :href="'/teacher/article/details.html?id='+article.id">{{article.title}}</a></h3>
                    <h5>发布于：<span>{{article.releaseTime}}</span></h5>
                    <p v-html="article.content"></p>
                </div>
                <div class="comment count">
                    <a href="details.html#comment">评论</a>
                    <a href="javascript:;" :id="'zan'+article.articleId" v-bind:class="{like:true,'layblog-this':article.zan}">点赞</a>
                </div>
            </div>
        </div>
        <div id="article_items"></div>
    </div>
</div>

<div th:include="/teacher/templates::footer"></div>
<script src="/layui/layui.js"></script>
<script src="/vue/vue.js"></script>
<script>
    // 参数
    var key = null;
    if(document.location.href.indexOf("?")!=-1){
        var param = document.location.href.split('?')[1];
        key = param.split('=')[1];
    }
    Search = new Vue({
        el: '#search',
        data: {
            text: '请输入'
        },
        methods: {}
    });

    layui.config({
        base: '/js/'
    }).use('index', function () {
    });


</script>
</body>
</html>